<template>
    <div class="HotListHead">
        <div class="HotListHead-1">
            <div class="HotListHead-top">
                <div class="HotListHead-top-left">
                    <router-link to="/"><van-icon name="arrow-left" /></router-link>
                </div>
                <div class="HotListHead-top-right">
                    <van-icon name="share-o" />
                    <van-icon name="shopping-cart-o" badge="5" />
                </div>
            </div>
            <div class="HotListHead-con">
                <div class="HotListHead-title">
                    <h3>西安热卖榜</h3>
                    <span>13:00更新</span>
                </div>
                <div class="HotListHead-title-sales">
                    <span>按最近24小时销量和销售额度</span><van-icon name="info-o" />
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
   
}
</script>

<style scoped>
.HotListHead-title-sales{
    margin-top: .17rem;
}
.HotListHead-title-sales span{
    display: inline-block;
    width: 1.98rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    font-size: .13rem;
}
.HotListHead-title-sales i{
    font-size: .16rem;
    vertical-align: middle;
}
.HotListHead-title-sales{
    color:#fff;
    opacity: .5;
}
.HotListHead-title h3{
    font-size: .21rem;
    color: #fff;
    font-weight: bold;
    margin-right: .07rem;
}
.HotListHead-title span{
    vertical-align: middle;
    height: .21rem;
    display: flex;
    align-items: center;
    color: #fff;
    padding:0 .05rem;
    border-radius: .21rem;
    background-color:rgba(255,255,255,0.5);

}
.HotListHead-con{
    padding:0 .14rem;
}
.HotListHead-title{
    display: flex;
    align-items: center;
    margin-top: .12rem;
}
.HotListHead-top{
    padding: .19rem .12rem 0 .20rem;
}
.HotListHead-top i{
    font-size: .20rem;
}
.HotListHead-top-right i:nth-child(2){
    margin-left:.17rem;
}
.HotListHead-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: .40rem;
}
.HotListHead-1{
 width: 100%;
 height: 1.24rem;
 background-color: skyblue;
}
</style>